<template>
  <div class="seckill-wrap" v-if="GoodsData">
    <div class="seckill shadow" v-for="(item,index) in GoodsData" :key="index" @click="getSeckillGoods(item)">
      <div class="avatar" v-lazy:background-image="item.good.avatar">
        <img :src="item.avatar">
        
      </div>
      <div class="info">
        <div>
          <h4 class="title">{{ item.good.sort_title  }}</h4>
          <p class="sort_title">{{ item.good.title  }}</p>
        </div>
        <div class="tool">
          <div class="money">
            {{ item.good.price | money }}
            <template v-if="item.coupon_num">
                  秒抢卡 : {{ item.coupon_num }}
              </template>
            </div>
          <div class="buttom"> <span>马上抢</span></div>
        </div>
        <div class="goods-info-time">
           <span>{{ item | timesText }}</span>
           <van-count-down style="color: red" :time="item | times" />
        </div>
        
      </div>
      
    </div>
    <template v-if="GoodsData.length == 0">
      <div class="goods-null">
        <h3>暂无商品</h3>
      </div>
    </template>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'Seckill',
  props: {
    GoodsData: [Array,Object]
  },
  methods:{
    getSeckillGoods(item){
      this.$emit('getSeckillGoods',item)
    }
  },
  filters:{
        timesText(val){
            let newDate = moment().format('YYYY-MM-DD HH:mm:ss');
            let { apply_end_at,apply_start_at,start_at,end_at } = val;
            if(moment(newDate).isBefore(apply_start_at)){
                return '距活动预约开始剩余'
            }else if(moment(newDate).isBefore(apply_end_at)){
                return '距活动预约结束剩余'
            }else if(moment(newDate).isBefore(start_at)){
                return '距活动开始还剩余'
            }else if(moment(newDate).isBefore(end_at)){
                return '距活动结束还剩余'
            }else{
                return '活动已结束'
            }
        },
        times(val){
            let newDate = moment().format('YYYY-MM-DD HH:mm:ss');
            let { apply_end_at,apply_start_at,start_at,end_at } = val;
            if(moment(newDate).isBefore(apply_start_at)){
                return moment(apply_start_at,'YYYY-MM-DD HH:mm:ss') - moment(newDate)
            }else if(moment(newDate).isBefore(apply_end_at)){
                return moment(apply_end_at,'YYYY-MM-DD HH:mm:ss') - moment(newDate)
                // return '活动预约未开始'
            }else if(moment(newDate).isBefore(start_at)){
                return moment(start_at,'YYYY-MM-DD HH:mm:ss') - moment(newDate)
            }else if(moment(newDate).isBefore(end_at)){
                return moment(end_at,'YYYY-MM-DD HH:mm:ss') - moment(newDate)
                // return '活动进行中'
            }else{
                return 0
                console.log('活动已结束')
                // return '活动已结束'
            }
        }
    }
}
</script>
<style lang="less" scoped>
.seckill-wrap {
  background: #e5e5e5;
  .seckill {
    margin: 5px 0 0;
    padding: 5px;
    display: grid;
    grid-template-columns: 100px 1fr; 
     .info {
        display: grid;
        grid-template-rows: 1fr 25px;
        padding-left: .5rem;
        .tool {
          div {
            display: inline-block;
          }
          .money {
            font-size: 17px;
            color: rgb(225, 37, 27);
            width: 80%;
          }
          .buttom {
            padding: 1px 7px;
            font-size: 10px;
            line-height: 16px;
            color: white;
            border-radius: 6px;
            background: #F93F24;
          }
        }
        .goods-info-time {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            padding: 0.3846rem  0.7692rem 0 0 ;
        }
        div .title {
          margin: 0;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
        }
        .sort_title {
          font-size: 12px;
          color: #666;
        }
        :nth-child(1) p{
          margin: 0;
          transition: color .2s ease;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
     }
  } 
}
@media screen and (min-width: 300px) and (max-width: 350px) {
  .avatar {
       height: 100px;
       width: 100px;
       border-radius: 4px;
       background-repeat:no-repeat;
       background-size: cover
    }
}


@media screen and (min-width: 350px) and (max-width: 399px) {
 .avatar {
       height: 100px;
       width: 100px;
       border-radius: 4px;
       background-repeat:no-repeat;
       background-size: cover
    }
}


@media screen and (min-width: 400px) and (max-width: 420px) {
  .avatar {
       height: 100px;
       width: 100px;
       border-radius: 4px;
       background-repeat:no-repeat;
       background-size: cover
    }
}

.goods-null {
  background-color: white;
  h3 {
    padding: 1rem 0;
    text-align: center;
    margin: 0;
  }
}
</style>
